import React, { useState, useEffect } from 'react'
import { Toast, NavBar, Grid, Button, Tabs, Typography } from 'react-vant';
import '../css/bookdetail.css'
import { Checked, Location, CartO, ShopO, LikeO, Like } from '@react-vant/icons';
import { Swiper, Image, ActionBar } from 'react-vant';
import { images } from './images';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
export default function Bookdetail() {
    const jump = useNavigate()


    const [review, setreview] = useState('')
    const getreview = async () => {
        let { data: { review } } = await axios.get('http://localhost:3000/review')
        setreview(review)
    }
    const [comment, setcomment] = useState('')
    const getcomment = async () => {
        let { data: { comment } } = await axios.get('http://localhost:3000/comment')
        setcomment(comment)
    }
    useEffect(() => {
        getreview()
        getcomment()
    }, [])

    const [said, setsaid] = useState('')
    const submitSaid = async () => {
        await axios.post('http://localhost:3000/reviewadd', { userId: '111', say: said, gid: '668b5533760f000033003712' })
        getreview()
    }

    const [comt,setcomt]=useState('')
    const submitComt=async()=>{
        await axios.post('http://localhost:3000/commentadd',{userId:'111',said:comt,rid:rid})
        getcomment()
    }

    const [rid,setrid]= useState('')
    const goReceive=(id)=>{
        if(flag==='none'){
            setflag('block')
        }else{
            setflag('none')
        }
        setrid(id)
    }
    const [flag,setflag]=useState('none')
    return (
        <div id='xiangqing'>
            <NavBar
                title="书名"
                leftText="返回"
                onClickLeft={() => (jump(-1))}
            />

            <div id='det'>

                <div className='author'>
                    <div className="authorphoto">
                        头像
                    </div>
                    <div className="authorinfo">
                        <p style={{ fontSize: '13px' }}>名称名称名称名称</p>
                        <p style={{ fontSize: '12px' }}>刚刚来过</p>
                    </div>
                    <div className="authorplus">
                        <Checked />学生认证
                    </div>
                </div>
                <div id="bookprice">
                    <span style={{ fontSize: '23px' }}>￥16</span>
                    <span style={{ textDecoration: 'line-through' }}>原价23</span>
                    <span>运费￥5</span>
                    <span>支持自提</span>
                </div>
                <div id="map">
                    <p><span><Location /></span>广东-广州-天河区  五山路381号</p>
                </div>
                <div id="bookitem">
                    <div className="demo-swiper">
                        <Swiper>
                            {images.map((image) => (
                                <Swiper.Item key={image}>
                                    <Image lazyload src={image} />
                                </Swiper.Item>
                            ))}
                        </Swiper>
                    </div>
                </div>
                <div id="bookinfo">
                    <p>&emsp;&emsp;作者&emsp;&emsp;&emsp;&emsp;&emsp;王小波</p>
                    <p>&emsp;&emsp;出版社&emsp;&emsp;&emsp;&emsp;北京十月文艺出版社</p>
                    <p>&emsp;&emsp;ISBN&emsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;168135168168</p>
                    <p>&emsp;&emsp;品相&emsp;&emsp;&emsp;&emsp;&emsp;9成新</p>
                </div>
                <div id="detail">
                    <h4>商品详情</h4>
                    <hr />
                    <div id='dtl'>
                        <Typography.Text ellipsis={4} style={{ fontSize: '13px' }}>《十宗罪:中国十大恐怖凶杀案》内容简介：绝对震撼的角色安排：四个超级警察，各怀绝技，从全国警察队伍中挑选而出，对各地发生的特大罪案进行侦破。极度扭曲的罪案案犯：强奸杀人犯、恋物癖者、异装癖、非主流少年、碎尸凶手、卖肾的人、变态杀手、色狼、精神病患者、一天到晚跪在街头的人……
                            诡异绝顶的十大凶案：地窖囚奴、雨夜幽灵、人皮草人、色狼传说、精神病院、肢体雪人……哪个更恐怖，哪个更震撼？</Typography.Text>
                    </div>

                </div>
                <div id="personal">
                    <h4>互动</h4>
                    <hr />
                    <div id="positional">
                        <div id="positional_photo">
                            <img src="./vite.svg" alt="" />
                        </div>

                        <div id="positional_con">
                            <input type="text" value={said} onChange={(e) => { setsaid(e.target.value) }} placeholder="问问更多细节吧" />
                            <button onClick={() => { submitSaid() }}>留言</button>
                        </div>

                    </div>

                    {review.length > 0 ? (
                        <div>
                            {review.map(item => (
                                <div id="recover">
                                    <div id='recover_img'>
                                        <img src="./vite.svg" alt="" />
                                    </div>
                                    <div id="recover_said">
                                        <p style={{ fontSize: '12px', color: '#cecece' }}>一条咸鱼</p>
                                        <p style={{ fontSize: '15px' }}>{item.say}</p>
                                    </div>
                                    <button onClick={()=>{goReceive(item._id)}}>回复Ta</button>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div id="recover">
                            加一些你想问的话吧
                        </div>
                    )}

                    <hr />
                    <div id="common">
                        {comment.length > 0 ? (
                            <div>
                                {

                                    comment.map(item => (
                                        <div id="common_author">
                                            <div id="author_info">
                                                <p className='p1'>
                                                    <span style={{ border: '1px solid tomato', width: '40px', textAlign: 'center', borderRadius: '20px', color: 'tomato' }}>卖家</span>
                                                    <span>老笔斋的老猫</span>
                                                </p>
                                                <p className='p2'>{item.said}</p>
                                            </div>
                                            <div id="author_photo">
                                                <img src="./聊斋志异.webp" alt="" />
                                            </div>

                                        </div>
                                    ))
                                }
                            </div>
                        ) : (
                            
                            <div id="common1" style={{display:flag}}>
                                <input type="text" value={comt} onChange={(e)=>{setcomt(e.target.value)}} placeholder='回答他'/> <button onClick={()=>{submitComt()}}>回复</button>
                            </div>
                        )}

                    </div>
                </div>
                <div id="footer">
                    <ActionBar>
                        <ActionBar.Icon
                            icon={<LikeO />}
                            text='想要'
                            onClick={() => console.log('cart click')}
                        />
                        <ActionBar.Icon
                            icon={<CartO />}
                            text='待会买'
                            onClick={() => console.log('shop click')}
                        />
                        <ActionBar.Button
                            type='info'
                            text='聊一聊'
                            onClick={() => console.log('button click')}
                        />
                        <ActionBar.Button
                            type='danger'
                            text='马上买'
                            onClick={() => jump('/cell')}
                        />
                    </ActionBar>
                </div>
            </div>
        </div>
    )
}
